<template>
	<view>
		<u-navbar title="登录" :autoBack="true" :placeholder="true"></u-navbar>
		<image v-if="stock.loginBackImg && name === 'shangtuo'" class="logo" :src="stock.loginBackImg" mode="aspectFit" />
		<image v-else class="logo" src="@/static/images/logo.png" mode="aspectFit" />
		<view class="login">
			<view class="form">
				<view class="mt-160">
					<view v-if="isSelected">
						<u-button
							v-if="systemInfo.hostName !== 'alipay'"
							type="primary"
							size="large"
							open-type="getPhoneNumber"
							@getphonenumber="decryptPhoneNumber"
							:customStyle="{ fontSize: '32rpx', color: '#000' }"
						>
							手机号一键登录
						</u-button>

						<!-- 支付宝按钮 -->
						<button
							style="color: #000; background-color: #edac2f; border-color: #edac2f; font-size: 32rpx"
							v-else="isSelected"
							open-type="getPhoneNumber"
							scope="phoneNumber"
							@getphonenumber="decryptPhoneNumber"
						>
							手机号一键登录
						</button>
					</view>

					<u-button type="primary" size="large" v-else @click="onTrembling" :customStyle="{ fontSize: '32rpx', color: '#000' }">手机号一键登录</u-button>
				</view>
				<view class="protocol" :class="animation">
					<uni-icons
						custom-prefix="iconfont"
						:type="isSelected ? 'icon-yuanxingxuanzhongfill' : 'icon-yuanxingweixuanzhong'"
						:color="isSelected ? '#EDAC2F' : '#999'"
						size="16"
						@click="onSel"
					/>
					<text class="ml-10">我已阅读并且同意</text>
					<navigator class="line-yellow" open-type="navigate" url="/pages/article/agreement?type=user" hover-class="none">《用户服务协议》</navigator>
					<navigator class="line-yellow" open-type="navigate" url="/pages/article/agreement?type=privacy" hover-class="none">《隐私政策》</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
import common from '@/common/util.js';
import { baseName } from '@/utils/env.js';
import myMixins from '../../common/mixins/myMixins';
export default {
	mixins: [myMixins],
	data() {
		return {
			isSelected: false,
			animation: '',
			orderIdStr: 0,
			deskId: 0,
			systemInfo: common.getSystemInfo(),
			type: '',
			popupProps: {},
			name: baseName
		};
	},
	onLoad(option) {
		this.systemInfo = common.getSystemInfo();
		if (option.orderIdStr) {
			this.deskId = option.deskId;
			this.orderIdStr = option.orderIdStr;
		}
		if (option.type && option.type === 'advertising' && option.popupProps) {
			this.type = option.type;
			this.popupProps = this.parse(option.popupProps);
		}
	},
	computed: {
		...mapState(['stock', 'otherData'])
	},
	methods: {
		...mapMutations(['SET_LOGIN']),
		onSel() {
			this.isSelected = !this.isSelected;
		},
		onTrembling() {
			if (!this.isSelected) {
				this.animation = 'shake-animation';
				setTimeout(() => {
					this.animation = '';
				}, 2000);
			}
		},
		decryptPhoneNumber(event) {
			let otherData = this.otherData;
			let that = this;
			if (event.detail.errMsg === 'getPhoneNumber:ok') {
				uni.login({
					provider: this.systemInfo && this.systemInfo.hostName !== 'alipay' ? 'weixin' : 'alipay', //使用微信登录
					success: function (loginRes) {
						console.log(event);
						that.$api
							.DPhoneNumber({
								sessionAuthId: otherData, // 调用onlogin返回数据
								iv: event.detail.iv ? event.detail.iv : null,
								sign: that.systemInfo && that.systemInfo.hostName === 'alipay' ? event.detail.sign : null,
								encryptedData: event.detail.encryptedData,
								code: loginRes.code,
								appid: uni.getAccountInfoSync().miniProgram.appId,
								storeId: that.stock.id,
								deskId: that.deskId, // 判断是否从登录订单会员进入
								orderIdStr: that.orderIdStr,
								type: that.systemInfo && that.systemInfo.hostName !== 'alipay' ? 2 : 1
							})
							.then((res) => {
								that.$store.commit('SET_LOGIN', {
									isLogin: true,
									token: res.data.auth.token,
									userInfo: res.data.user,
									systemAppId: res.data.systemAppId,
									stock: res.data.store,
									otherData: res.otherData
								});
								if (that.type === 'advertising' && that.popupProps.value) {
									uni.redirectTo({ url: that.popupProps.value });
								} else {
									uni.navigateBack();
								}
							});
					},
					fail(err) {
						console.log(err);
					}
				});
				// uni.login({
				// 	provider: 'weixin', //使用微信登录
				// 	success: function(loginRes) {
				// 		that.$api.OnLogin({
				// 			iv: event.detail.iv,
				// 			encryptedData: event.detail.encryptedData,
				// 			code: loginRes.code,
				// 			appid: uni.getAccountInfoSync().miniProgram.appId,
				// 			storeId: that.stock.id
				// 		}).then(res=>{
				// 			that.$store.commit('SET_LOGIN',{
				// 				isLogin: true,
				// 				token:res.data.auth.token,
				// 				userInfo:res.data.user,
				// 				systemAppId: res.data.systemAppId,
				// 				stock:res.data.store
				// 			})
				// 			uni.navigateBack()
				// 		})
				// 	}
				// })
			} else {
				uni.showModal({
					title: '提示',
					content: '您已拒绝授权，请重新点击并授权!',
					showCancel: false
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.logo {
	display: block;
	width: 80%;
	margin: 0 auto;
}

.login {
	padding: 0 40rpx;

	.form {
		padding-top: 160rpx;

		.protocol {
			display: flex;
			align-items: center;
			margin-top: 140rpx;
			font-size: 24rpx;
		}
	}
}

@keyframes shake {
	0% {
		transform: translateX(0);
	}

	25% {
		transform: translateX(-4px);
	}

	50% {
		transform: translateX(4px);
	}

	75% {
		transform: translateX(-4px);
	}

	100% {
		transform: translateX(4px);
	}
}

.shake-animation {
	display: inline-block;
	animation: shake 0.5s;
	/* 抖动的持续时间 */
	animation-iteration-count: infinite;
	/* 动画重复次数 */
}
</style>
